import React from 'react';
import { AvatarDropdown } from './AvatarDropdown';
import { createStyles } from 'antd-style';
import { UserOutlined } from '@ant-design/icons';
import { AvatarName } from '../index';

export type SiderTheme = 'light' | 'dark';

const useStyles = createStyles(() => ({
  container: {
    display: 'flex',
    alignItems: 'center',
  },
}));

export default function RightContent() {
  const { styles } = useStyles();
  return (
    <div className={styles.container}>
      <AvatarDropdown>
        <span style={{ display: 'flex', alignItems: 'center' }}>
          <UserOutlined style={{ marginRight: 4 }} />
          <AvatarName />
        </span>
      </AvatarDropdown>
    </div>
  );
}
